<template>
  <div class="detail-comment">
    <div class="item">
      <span>用户评价</span>
      <span class="more">更多&gt;</span>
    </div>
    <div v-if="comment.user" class="clearfix">
      <div class="user">
        <img :src="comment.user.avatar" alt="">
        <div class="user-name">{{comment.user.uname}}</div>
      </div>
      <div class="content">{{comment.content}}</div>
      <div class="create">
        <span>{{comment.created | showTime}}</span>
        <span>{{comment.style}}</span>
      </div>  
      <div class="img" v-for="item in comment.images" :key="item.index">
        <img :src="item">
      </div>    
    </div>
    <div v-else class="no-comment">还没有人评价哦~</div>
  </div>
</template>

<script>
import { formatDate } from '@/common/utils'

export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  filters: {
    showTime(value) {
      const date = new Date(value * 1000);
      return formatDate(date,"yyyy/MM/dd")
    }
  }
}
</script>

<style scoped>
.detail-comment {
  border-top: 5px solid #eee;
  border-bottom: 5px solid #eee;
  padding: 0 8px;
  margin: 10px 0;
}

.item {
  color: #000;
  border-bottom: 2px solid #ddd;
  height: 40px;
  line-height: 40px;
}

.more {
  float: right;
}

.user {
  display: flex;
  align-items: center;
  margin: 5px;
}

.user img {
  width: 30px;
  border-radius: 50%;
}

.user-name {
  color: #000;
  font-size: 16px;
  margin-left: 8px;
}

.content {
  margin: 10px 0 5px;
  color: #000;
  font-size: 14px;
}

.create {
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}

.create span:nth-child(2) {
  margin-left: 5px;
}

.img {
  float: left;
}

.img img {
  width: 80px;
  margin: 5px;
}

.no-comment {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>